<template>
    <div class="user-search-name" :size="size" :shape="shape">
        <input type="text" v-model="name" :placeholder="placeholder" @keyup.enter="onChange()" />
        <svg-icon class="user-search-icon" name="user-search" @click.native="onChange()" />
        <svg-icon class="user-search-clear" name="select-clear" @click.native="onClean()" v-show="name" />
    </div>
</template>

<script>
export default {
    props: {
        value: { type: String, default: '' },
        placeholder: { type: String, default: '' },
        size: { type: String, default: 'large' },
        shape: { type: String, default: 'plain' },
    },
    data () {
        return {

        };
    },
    computed: {
        name: {
            get () {
                return this.value
            },
            set (val) {
                this.$emit('input', val)
            }
        }
    },

    methods: {
        onChange () {
            this.$emit('change', this.value)
        },
        // 清除
        onClean () {
            if (this.name) {
                this.name = '';
                this.$emit('change', this.name)
            }
        }
    },
    created () {

    },

};
</script>

<style scoped lang="scss">
.user-search-name {
    display: flex;
    position: relative;
    vertical-align: top;
    width: 100%;
    max-width: 320px;
    height: 40px;
    flex: 320;
    input {
        border-radius: 8px;
        padding-left: 36px;
        height: 100%;
        transition: all 0.2s;
        border: 1px solid #e6e6e6;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;

        &::placeholder {
            font-size: 14px;
            color: #757575;
        }

        &:hover {
            border-color: #c7c7c7;
        }

        &:focus {
            border-color: #f6b2cd;
            box-shadow: 0 0 1px 1px #f6b2cd;

            & + svg {
                fill: #000;
            }
        }
    }

    svg {
        position: absolute;
        left: 10px;
        top: 50%;
        width: 24px;
        height: 24px;
        line-height: 40px;
        text-align: center;
        transform: translateY(-50%);
        color: #919191;
        cursor: pointer;
        transition: all 0.2s;

        &.user-search-clear {
            right: 12px;
            left: auto;
            width: 14px;
            height: 14px;
            &:hover {
                color: #000;
            }
        }
    }

    &[size='medium'] {
        height: 36px;
        input {
            padding-left: 32px;
        }

        .user-search-icon {
            left: 8px;
        }
    }

    &[size='small'] {
        height: 32px;
        input {
            padding-left: 28px;
        }

        .user-search-icon {
            left: 6px;
        }
    }

    // 实心的
    &[shape='solid'] {
        input {
            border-color: transparent;
            background: #f6f6f6;
            &:hover {
                // border-color: #f6b2cd;
                border: 1px solid #c7c7c7;
            }
            &:focus {
                border-color: #f6b2cd;
                box-shadow: 0 0 1px 1px #f6b2cd;
            }
        }
    }
}
</style>
